<template>
  <view class="wh_750 pageHeight flex flex-column align-center bg_F5F5F5">
    <s-header-title title="目标家谱" is-display-back background="#FFFFFF" is-fixed
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height: `${state.pageHeight}px`}"></view>
    <view class="hW_20"></view>
    <view class="inputName flex align-center justify-between">
      <input v-model="state.genealogyNameValue" placeholder="请输入家谱号"
             placeholder-class="inputName_placeholder"
             confirm-type="search"
             :focus="state.familyNameFocus"
             @confirm="confirm"
      >
      </input>
      <view class="fs_28 color_292929 fw_500"
            style="white-space: nowrap"
            @click.stop="confirm"
      >
        搜索
      </view>
    </view>
    <view class="flex-sub" style="position: relative">
      <scroll-view class="wh_750"
                   style="position: absolute;left: 50%;transform: translateX(-50%);top: 0;height: 100%"
                   scroll-y="true"
      >
        <view class="flex align-center flex-column wh_750">
          <view class="familyTreeCard flex align-center justify-between mt_20" v-for="(info, index) in state.list">
            <view class="familyTreeCard_left flex flex-column align-center">
              <view class="imageContent">
                <image class="imageContent_image" :src="`${IMG_URL}/index/familyTreeListing_icon.png`"></image>
              </view>
              <view class="add_time">
                创建时间: {{ dayjs(info.update_time * 1000).format('YYYY年MM月DD日') }}
              </view>
            </view>
            <view class="familyTreeCard_right">
              <view class="title">
                {{ info.title }}
              </view>
              <view class="content">
                发起人: {{ info.username || '暂无发起人' }}
              </view>
              <view class="content">
                家谱号: {{ info.code || '暂无家谱号' }}
              </view>
              <view class="content">
                家谱简介: {{ info.remark || '暂无简介' }}
              </view>
              <view class="hW_18"></view>
              <view class="applyFor flex justify-end">
                <view class="applyFor_text flex align-center justify-center" @click.stop="selectGenealogy(info)">
                  {{ '选定' }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="hW_150"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import { onLoad, onReady } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';

  const state = reactive({
    options: {},
    pageHeight: 0,
    genealogyNameValue: '',
    familyNameFocus: false,
    list: [],
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  onLoad((options) => {
    state.options = options;
  });
  onReady(() => {
    state.familyNameFocus = true;
  });
  const getPageHeight = (height) => {
    state.pageHeight = height;
  };

  async function confirm() {
    const { data } = await sheep.$api.genealogy.searchGenealogy({
      code: state.genealogyNameValue,
    });
    state.list = data;
  }

  async function selectGenealogy(item) {
    uni.$emit('selectGenealogy', item);
    uni.navigateBack();
  }
</script>


<style scoped lang="scss">
  .inputName {
    width: 702rpx;
    height: 80rpx;

    input {
      width: 620rpx;
      height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }

  .familyTreeCard {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 40rpx 15rpx;
    overflow: hidden;
  }

  .familyTreeCard_left {
    .imageContent {
      width: 290rpx;
      height: 210rpx;
      overflow: hidden;

      .imageContent_image {
        width: 290rpx;
        height: 210rpx;
      }
    }

    .add_time {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #4B4B4B;
    }
  }

  .familyTreeCard_right {
    .title {
      width: 390rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #4B4B4B;
    }

    .content {
      width: 390rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #4B4B4B;
    }

    .applyFor {
      width: 390rpx;
      &_text {
        width: 150rpx;
        height: 70rpx;
        background: #FF4206;
        border-radius: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
